<template>
  <a-row>
    <a-col :span="24">
      <a-card title="保单信息">
        <a-descriptions :column="2">
          <a-descriptions-item label="车牌号">{{detail.truckNumber}}</a-descriptions-item>
          <a-descriptions-item label="保险单号">{{detail.insuranceNo}}</a-descriptions-item>
          <a-descriptions-item label="保险种类">{{detail.insuranceType}}</a-descriptions-item>
          <a-descriptions-item label="保险公司">{{detail.custName}}</a-descriptions-item>
          <a-descriptions-item label="保险金额(元)">{{detail.insuranceAmount}}</a-descriptions-item>
          <a-descriptions-item label="保险返点(%)">{{detail.insuranceRebate}}</a-descriptions-item>
          <a-descriptions-item label="生效日期">{{detail.beginTime}}</a-descriptions-item>
          <a-descriptions-item label="签单日期">{{detail.signTime}}</a-descriptions-item>
          <a-descriptions-item label="经办人">{{detail.handledBy}}</a-descriptions-item>
          <a-descriptions-item label="终止日期">{{detail.endTime}}</a-descriptions-item>
          <a-descriptions-item label="保险公司联系电话">{{detail.linkManPhone}}</a-descriptions-item>
          <a-descriptions-item label="保险公司联系人">{{detail.linkMan}}</a-descriptions-item>
        </a-descriptions>
      </a-card>

      <br />
      <a-card title="保单合同">
        <viewer v-if="pisArr.length > 0" :images="pisArr" :options="{url: 'data-x'}">
          <template v-for="(src, index) in pisArr">
            <img
              style="width:100px;height:100px;margin-right:10px;border:1px solid #eee"
              :src="`${src}?x-oss-process=image/resize,h_100`"
              :data-x="src"
              :key="index"
            />
          </template>
        </viewer>
        <a-list v-if="pdfArr.length > 0">
          <template v-for="(src, index) in pdfArr">
            <a-list-item :key="index">
              <div>
                <a-icon type="link" />
                {{pdfName(src)}} &nbsp;
                <a :href="src" target="_blank">查看</a>
              </div>
            </a-list-item>
          </template>
        </a-list>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import 'viewerjs/dist/viewer.css'
import DetailList from '@/components/DescriptionList'
import {queryTruckContractDetail} from '@/api/landCenter'

export default {
  name: 'insurance-detail',
  props: ['id'],
  components: {
    [DetailList.name]: DetailList,
    [DetailList.Item.name]: DetailList.Item
  },
  data () {
    return {
      detail: {
        truckNumber: '',
        contractId: '', // 合同id
        insuranceNo: '', // 保险单号
        insuranceType: '', // 保险种类
        insuranceAmount: '', // 保险金额
        insuranceRebate: '', // 保险返点
        signTime: '', // 签单日期
        handledBy: '', // 经办人
        beginTime: '', // 生效日期
        endTime: '', // 终止日期
        custName: '', // 保险公司
        linkMan: '', // 保险公司联系人
        linkManPhone: '', // 保险公司联系电话
        pictures: '' // 合同图片：多个英文逗号隔开
      }
    }
  },
  created () {

  },
  computed: {
    pisArr () {
      if (this.detail.pictures) {
        const result = this.detail.pictures.split(',')
        return result.filter(v => !~v.toLowerCase().indexOf('.pdf'))
      }
      return []
    },
    pdfArr () {
      if (this.detail.pictures) {
        const result = this.detail.pictures.split(',')
        return result.filter(v => ~v.toLowerCase().indexOf('.pdf'))
      }
      return []
    }
  },
  methods: {
    pdfName (src) {
      if (src && (~src.indexOf('.pdf') || ~src.indexOf('.PDF'))) {
        return src.substring(src.lastIndexOf('/') + 1)
      }
      return false
    },
    init () {
      if (this.id) {
        queryTruckContractDetail({contractDetailId: this.id}).then(rsp => {
          this.detail = Object.assign({}, this.detail, rsp.data)
        })
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.init()
    })
  },
  watch: {
    id () {
      this.init()
    }
  }
}
</script>

<style lang="less" scoped>
</style>
